<template>
  <div class="tranfer-box">
    <div class="left-info">
      <div class="tab">
        <Checkbox v-model="isAll" :disabled="disabled" @on-change="onChangeAllSelect">全选</Checkbox>
        <p>当前经销商</p>
      </div>
      <div class="content">
        <ul>
          <template v-for="(item, index) in $store.state.bargain.form.payDistribList">
            <li :key="index" class="checkbox">
              <label :for="'paycheckbox'+index" :de="item.status">
                <input
                  :id="'paycheckbox'+index"
                  v-model="item.status"
                  class="payText"
                  :disabled="disabled"
                  type="checkbox"
                  :value="item.value"
                  @change="onJoinSelectData(index, item, $event)"
                >
                <span />
                {{ item.value }}
              </label>
            </li>
          </template>
        </ul>
      </div>
    </div>
    <div class="right-info">
      <div class="tab">
        <p>已选经销商</p>
        <div class="cancel-info" @click="onCancel">全部取消</div>
      </div>
      <div class="content">
        <ul>
          <li v-for="(item, index) in $store.state.bargain.form.payDistribedList" :key="index" class="checkbox">
            <label :for="'paycheckboxed' + index">
              <input
                :id="'paycheckboxed'+index"
                v-model="item.status"
                class="payText1"
                :disabled="disabled"
                :text="item.status"
                type="checkbox"
                :value="item.value"
                @change="deleteSelectData(index, item, $event)"
              >
              <span />
              {{ item.value }}
            </label>
          </li>
        </ul>
      </div>
    </div>
    <div :class="{'load-disable': disabled}" />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    param: '',
    disabled: Boolean
  },
  data () {
    return {
      isAll: false,
      selectList: []
    }
  },
  mounted () {
    // this.$store.dispatch('getDistributData', '1')
  },
  methods: {
    deleteSelectData (index, item, e) {
      e.target.checked = true
      this.$store.commit('bargainDeleteDistib', { index: index, item: item, type: 'pay' })
    },
    onJoinSelectData (index, item, e) {
      e.target.checked = false
      this.$store.commit('bargainDistib', { index: index, item: item, type: 'pay' })
    },
    onChangeAllSelect () {
      document.querySelectorAll('.payText1').forEach(item => {
        item.checked = true
      })
      this.$store.commit('onChangeAllSelect', 'pay')
    },
    onCancel () {
      if (this.disabled) return
      this.isAll = false
      this.$store.commit('onCancel', 'pay')
    }
  },
  computed: {
    ...mapGetters([
      'bargainSelected'
    ])
  }
}
</script>

